<!DOCTYPE html>
<html>
<head>
	<title>PCC KPI</title>
	<meta name="format-detection" content="telephone=no" />
	<meta name="msapplication-tap-highlight" content="no" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<style>
	body{
		text-align: center;
	}
	table{
		width: 100%;
		border-collapse:collapse;
		border:none;
		margin-bottom: 50px;
	}
	table td, table th{
		border: solid #000 1px;
	}
	table tr{
		border-bottom: 1px solid #ccc;
	}
	table thead{
		padding: 1em;
		font-size: 25px;
		font-weight: bold;
	}
	</style>
	<script type="text/javascript" src="./is/js/lib/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="./is/js/lib/underscore-min.js"></script>
	<script type="text/javascript" src="./is/js/util/support.js"></script>
	<script type="text/javascript" src="./is/js/kpi.js"></script>
	<script type="text/javascript">

		var pageNames = {
			status:             'Front Page',
			wdy:                'What Drives you?',
			sport:              'Sport',
			family:             'Family',
			lifestyle:          'Lifestyle',
			'911':              '911',
			cayenne:            'Cayenne',
			boxster:            'Boxster',
			cayman:             'Cayman',
			macan:              'Macan',
			panamera:           'Panamera',
			pds:                'Personal Driving Experience',
			snowforce:          'Snowforce',
			travel:             'Travel',
			driving_school:     'Driving School',
			s_a:                'Service & Accessories',
			motorsport:         'Motorsport',
			lemans:             'Le Mans',
			principle:          'Principle',
			pcca:               'PCCA',
			Financial_services: 'Financial Services',
			vehicleList:        'Stocklist Main',
			vehicle_small_List: 'Stocklist Detail',
			play_video:         'Video Played',
			events:             'Events Section',
			features:           'Features Page',
			topic:              'Burger Menu',
			dealer:             'Dealership',
			movie:              'Cinema page',
			image:              'Contact page'
		};

		var pageTurn = ['status','wdy','sport','family','lifestyle','911','cayenne','boxster','cayman','macan','panamera','pds','snowforce','travel','driving_school','s_a','motorsport','lemans','principle','pcca','Financial_services','vehicleList','vehicle_small_List','play_video','events','features','topic','dealer','movie','image'];

		var changePages = function() {
			var $dom = $('#container table:first tr:first');
			$dom.children('td').each(function() {
				var txt = $(this).text();
				$(this).text(pageNames[txt] || txt);
			});
		};

		var getHtml = function(data) {
			var html = '<h2>'+data.title+'</h2><table><tbody>%s</tbody></table>';

			var keys = data.keys;
			var d    = data.data;
			var list = [];
			list.push([' '].concat(keys));
			for(var i in d){
				var res = [i];
				var tmp = _.map(keys, function() {return 0;});

				_.each(d[i], function(v, k) {
					var index  = _.indexOf(keys, k);
					tmp[index] = v;
				});
				list.push(res.concat(tmp));
			}

			var tHtml = '';
			_.each(list, function(v, k) {
				var tds  = _.reduce(v, function(prev, next) {
					return prev + '<td>'+next+'</td>';
				}, '');
				tHtml += '<tr>' + tds + '</tr>';
			});

			return util.format(html, tHtml);
		};

		$(function() {

		kpi.init();
		json = kpi.get();
		var str  = JSON.stringify(json);

		// json = {"pages":{"2015-6-4":{"911":21,"status":70,"wdy":65,"sport":32,"boxster":4,"cayman":2,"topic":18,"dealer":2,"movie":2,"image":1,"lifestyle":6,"pds":3,"snowforce":1,"travel":1,"vehicle_small_List":10,"features":16,"play_video":20,"family":4,"macan":2,"events":1,"driving_school":1,"panamera":1,"s_a":1,"motorsport":2,"lemans":1,"principle":1},"2015-6-5":{"911":19,"wdy":121,"status":97,"sport":45,"topic":2,"dealer":1,"vehicle_small_List":2,"play_video":55,"motorsport":1,"pcca":1,"lifestyle":1},"2015-6-6":{"911":8,"wdy":31,"status":26,"sport":19,"play_video":36,"motorsport":2,"boxster":2,"lemans":1,"family":6,"cayenne":3,"lifestyle":2,"movie":1,"image":2,"vehicle_small_List":5,"macan":1,"features":5,"s_a":2,"pds":1,"topic":3,"dealer":1,"vehicleList":2},"2015-6-8":{"911":7,"status":13,"wdy":13,"sport":10,"boxster":2,"vehicle_small_List":4,"features":10,"image":3,"topic":4,"motorsport":5,"pcca":1,"s_a":1,"play_video":6,"lemans":2,"events":1,"lifestyle":1,"pds":1},"2015-6-9":{"911":9,"wdy":46,"sport":27,"play_video":28,"motorsport":7,"pcca":2,"topic":15,"dealer":2,"movie":2,"principle":2,"status":18,"family":5,"cayenne":1,"vehicle_small_List":5,"panamera":1,"s_a":5,"image":2,"events":2,"travel":2,"driving_school":1,"features":10,"lifestyle":1,"pds":2,"lemans":2,"macan":1,"Financial_services":1},"2015-6-10":{"911":7,"wdy":28,"sport":13,"vehicle_small_List":1,"features":1,"status":22,"topic":3,"image":1,"dealer":1,"play_video":3},"2015-6-11":{"911":4,"wdy":10,"sport":10,"cayman":3,"status":6,"play_video":2,"motorsport":1,"pcca":1,"topic":2,"lifestyle":1,"vehicle_small_List":7,"family":3,"panamera":1,"features":15,"macan":1,"boxster":1,"image":1},"2015-6-12":{"911":2,"wdy":17,"status":13,"lifestyle":4,"snowforce":1,"play_video":8,"sport":4,"pds":2,"topic":3,"motorsport":1,"lemans":1},"2015-6-13":{"911":2,"wdy":47,"sport":11,"status":45,"play_video":60,"cayman":1,"vehicle_small_List":1,"motorsport":4,"pcca":2,"topic":3,"lemans":2,"family":2,"macan":1,"cayenne":1},"2015-6-14":{"911":7,"status":51,"wdy":55,"topic":6,"motorsport":4,"lemans":1,"play_video":60,"sport":12,"image":2,"vehicle_small_List":3,"features":9,"boxster":2,"family":2,"macan":1,"cayman":1,"principle":1},"2015-6-15":{"911":18,"play_video":10,"status":135,"wdy":140,"sport":35,"vehicle_small_List":24,"features":118,"topic":1}},"videos":{"2015-6-4":{"911":11,"boxster":3,"cayman":1,"macan":1,"driving_school":1,"panamera":1,"pds":2},"2015-6-5":{"911":54,"pcca":1},"2015-6-6":{"911":23,"boxster":4,"lemans":2,"cayenne":6,"Turbo":1},"2015-6-8":{"911":3,"lemans":1,"pds":1,"boxster":1},"2015-6-9":{"911":12,"pcca":3,"Turbo":1,"principle":1,"YangWu":1,"travel":2,"pds":5,"lemans":2,"Financial_services":1},"2015-6-10":{"911":3},"2015-6-11":{"911":1,"pcca":1},"2015-6-12":{"911":4,"snowforce":2,"lemans":2},"2015-6-13":{"911":14,"pcca":3,"lemans":35,"cayenne":8},"2015-6-14":{"911":41,"lemans":1,"macan":1,"principle":17},"2015-6-15":{"911":7,"principle":3}},"entrance":{"2015-6-4":{"click":37,"remote":5},"2015-6-5":{"click":95},"2015-6-6":{"click":18},"2015-6-8":{"remote":1,"click":8},"2015-6-9":{"click":16,"remote":2},"2015-6-10":{"remote":11,"click":12},"2015-6-11":{"click":6},"2015-6-12":{"click":11},"2015-6-13":{"click":46},"2015-6-14":{"click":51},"2015-6-15":{"click":130,"remote":3}},"books":{}};

		var map = {
			'books':    'BOOKING',
			'entrance': 'USAGE',
			'pages':    'PAGES',
			'videos':   'VIDEOS'
		};
		var tpl  = $('#tpl_table').html();
		var html = '';

		for(var i in json) {
			var tplData = {
				title: map[i],
				keys:  (function(items) {
					var _tmp = [];
					for(var j in items) {
						_tmp = _.union(_tmp, _.keys(items[j]));
					}
					return _tmp;
				})(json[i]),
				data:  json[i]
			};

			if(i == 'pages') {
				console.log(tplData.keys);
				tplData.keys = _.sortBy(tplData.keys, function(_i) {
					return _.indexOf(pageTurn, _i);
				});
				console.log(tplData.keys);
			}

			html += getHtml(tplData);
		}
		
		$('#container').append(html);
		changePages();
	});
	</script>
</head>
<body>
<div id="container">
	<h1>PCC KPI</h1>
</div>

</body>
</html>









